<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的收藏</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
</head>
<body>
<div id="app" class="container">
    <table class="table table-bordered table-hover">
        <thead>
        <tr>
            <th>课程名字</th>
            <th>课程封面</th>
            <th>课件数</th>
            <th>收藏时间</th>
            <th>取消收藏</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(record,index) in records":key="record.value">
            <td> {{index.cname}}</td>
            <td>{{record.cover}}</td>
            <td>{{record.coursewareNum}}</td>
            <td>{{record.collectTime}}</td>
            <td>
                <button class="btn btn-outline-success" @click="cancelCollect(record.cid)">取消收藏</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            records: []
        },
        mounted() {
            axios.get("/user/myAllCollect")
                .then(res => {
                    console.info(res.data);
                    this.records = res.data;
                });
        },
        methods: {
            cancelCollect: function (cid) {
                //先请求，后台先归还，后台成功了，前台才应该删除数据
                var params = new URLSearchParams();
                params.append("cid", cid);
                axios.post("/user/cancelCollect", params)
                    .then(res => {
                        alert(res.data.message);
                        //判断
                        if (res.data.code == 6) {
                            for (var i = 0; i < this.records.length; i++) {
                                record = this.records[i];
                                if (record.cid == cid) {
                                    //删除记录   只需要删除数据，页面上的记录也会被删除掉
                                    this.records.splice(i, 1);//从i的位置删除1个元素 包括i
                                    break;
                                }
                            }
                        }
                    })
            }
        }
    });
</script>
</body>
</html>